// lib/main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const ThemeColorsDemoApp());
}

/// 一个演示 ThemeData / ColorScheme 中大量颜色属性的示例 App
class ThemeColorsDemoApp extends StatefulWidget {
  const ThemeColorsDemoApp({super.key});

  @override
  State<ThemeColorsDemoApp> createState() => _ThemeColorsDemoAppState();
}

class _ThemeColorsDemoAppState extends State<ThemeColorsDemoApp> {
  // 允许在运行时切换 light / dark 来查看不同主题颜色
  bool _useDark = false;

  @override
  Widget build(BuildContext context) {
    // 自定义 color scheme（Material 3 风格，推荐）
    final ColorScheme myScheme = _useDark
        ? ColorScheme.dark(
      primary: Colors.deepPurple.shade200,
      onPrimary: Colors.black,
      secondary: Colors.teal.shade200,
      onSecondary: Colors.black,
      surface: Colors.grey.shade800,
      background: Colors.black,
      error: Colors.red.shade400,
      onError: Colors.white,
      onSurface: Colors.white,
      onBackground: Colors.white70,
      // 可扩展更多字段
    )
        : ColorScheme.light(
      primary: Colors.blue,
      onPrimary: Colors.white,
      secondary: Colors.orange,
      onSecondary: Colors.black,
      surface: Colors.white,
      background: Colors.grey.shade50,
      error: Colors.red,
      onError: Colors.white,
      onSurface: Colors.black,
      onBackground: Colors.black87,
    );

    // 构造 ThemeData：包含尽可能多的颜色属性（带注释）
    final ThemeData theme = ThemeData(
      useMaterial3: true, // 启用 Material 3（影响一些组件默认样式）
      colorScheme: myScheme, // 推荐使用 colorScheme 来驱动大部分颜色

      // 传统 ThemeData 层级颜色（部分与 colorScheme 重叠）
      primaryColor: myScheme.primary, // 主要颜色（AppBar, 主要按钮背景等）
      primaryColorLight: myScheme.primary.withOpacity(0.8), // primary 的浅变体
      primaryColorDark: _useDark ? Colors.deepPurple : Colors.blue.shade700, // 深色变体

      // accentColor 在较旧版本中代表次要强调色（已被 colorScheme.secondary 取代）
      // 仍然演示以便理解：等价于 secondary
      // ignore: deprecated_member_use
      // accentColor: myScheme.secondary,

      // 背景/画布颜色
      canvasColor: myScheme.surface, // 画布颜色（Material 背景）
      scaffoldBackgroundColor: myScheme.background, // Scaffold 背景色
      cardColor: myScheme.surface, // Card 背景色
      dividerColor: _useDark ? Colors.grey.shade700 : Colors.grey.shade300, // Divider 颜色
      // backgroundColor: myScheme.background, // ThemeData.backgroundColor（常规背景）

      // 通用提示/状态颜色
      // errorColor: myScheme.error, // 错误颜色（TextField error 等）
      hintColor: Colors.grey, // 提示文本颜色（如输入框 hint）
      disabledColor: Colors.grey.shade500, // 不可用控件颜色
      focusColor: Colors.amber.withOpacity(0.2), // 聚焦时使用（例如焦点环）
      hoverColor: Colors.grey.withOpacity(0.08), // 悬停颜色（鼠标/触控）
      splashColor: Colors.grey.withOpacity(0.12), // 水波纹/点击反馈颜色
      highlightColor: Colors.transparent, // 点击高亮（不同于 splash）

      // 组件专用颜色（部分为旧 API，但依然演示）
      // bottomAppBarColor: myScheme.surface, // BottomAppBar 背景
      dialogBackgroundColor: myScheme.surface, // 对话框背景色
      indicatorColor: myScheme.secondary, // 选中/指示器颜色（Tab 等）
      // toggleableActiveColor: myScheme.secondary, // Switch/Radio/Checkbox 选中色
      shadowColor: Colors.black54, // 阴影颜色
      secondaryHeaderColor: myScheme.secondary.withOpacity(0.1), // 用于 Table 等

      // 按钮主题（Material 旧 API 与新 API 混合演示）
      // ElevatedButton/OutlinedButton/TextButton 会受下面这些主题影响
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          backgroundColor: myScheme.primary,
          foregroundColor: myScheme.onPrimary,
        ),
      ),
      textButtonTheme: TextButtonThemeData(
        style: TextButton.styleFrom(foregroundColor: myScheme.primary),
      ),
      outlinedButtonTheme: OutlinedButtonThemeData(
        style: OutlinedButton.styleFrom(foregroundColor: myScheme.primary),
      ),

      // BottomNavigationBar 颜色示例（旧 API）
      bottomNavigationBarTheme: BottomNavigationBarThemeData(
        backgroundColor: myScheme.surface,
        selectedItemColor: myScheme.primary,
        unselectedItemColor: myScheme.onSurface.withOpacity(0.6),
      ),

      // SnackBar 主题
      snackBarTheme: SnackBarThemeData(
        backgroundColor: myScheme.surface,
        contentTextStyle: TextStyle(color: myScheme.onSurface),
      ),
    );

    return MaterialApp(
      title: 'Theme Colors Demo',
      // theme: theme,
      // darkTheme: theme.copyWith(brightness: Brightness.dark),
      themeMode: _useDark ? ThemeMode.dark : ThemeMode.light,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Theme & ColorScheme 演示'),
          // AppBar 使用 theme.primaryColor / colorScheme.primary
          backgroundColor: theme.colorScheme.primary,
          foregroundColor: theme.colorScheme.onPrimary,
          actions: [
            // 运行时切换 light/dark
            IconButton(
              tooltip: 'Toggle dark',
              icon: Icon(_useDark ? Icons.wb_sunny : Icons.nightlight_round),
              onPressed: () => setState(() => _useDark = !_useDark),
            ),
          ],
        ),
        // 底部导航 + FAB 用于展示一些颜色
        bottomNavigationBar: BottomNavigationBar(
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Me'),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 示例 Snackbar（展示 snackBarTheme）
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('This is a SnackBar')),
            );
          },
          backgroundColor: theme.colorScheme.secondary,
          foregroundColor: theme.colorScheme.onSecondary,
          child: const Icon(Icons.add),
        ),
        body: _DemoBody(theme: theme, scheme: myScheme),
      ),
    );
  }
}

/// 主体内容：用各种 Widget 直观展示 theme 里的颜色
class _DemoBody extends StatelessWidget {
  const _DemoBody({required this.theme, required this.scheme});

  final ThemeData theme;
  final ColorScheme scheme;

  @override
  Widget build(BuildContext context) {
    // 快捷变量
    final TextStyle labelStyle = theme.textTheme.bodySmall!.copyWith(
      color: theme.colorScheme.onBackground,
    );

    return ListView(
      padding: const EdgeInsets.all(12),
      children: [
        _sectionTitle('ColorScheme (推荐使用)', context),
        _colorTile('primary', scheme.primary, scheme.onPrimary),
        _colorTile('onPrimary', scheme.onPrimary, scheme.primary),
        _colorTile('secondary', scheme.secondary, scheme.onSecondary),
        _colorTile('onSecondary', scheme.onSecondary, scheme.secondary),
        _colorTile('surface', scheme.surface, scheme.onSurface),
        _colorTile('onSurface', scheme.onSurface, scheme.surface),
        _colorTile('background', scheme.background, scheme.onBackground),
        _colorTile('onBackground', scheme.onBackground, scheme.background),
        _colorTile('error', scheme.error, scheme.onError),
        const SizedBox(height: 16),

        _sectionTitle('ThemeData 常用颜色属性', context),
        _colorTile('primaryColor', theme.primaryColor, theme.colorScheme.onPrimary),
        _colorTile('primaryColorLight', theme.primaryColorLight, Colors.black),
        _colorTile('primaryColorDark', theme.primaryColorDark, Colors.white),
        // _colorTile('accentColor (deprecated)', theme.accentColor!, Colors.white),
        _colorTile('canvasColor', theme.canvasColor, theme.colorScheme.onSurface),
        _colorTile('scaffoldBackgroundColor', theme.scaffoldBackgroundColor, theme.colorScheme.onBackground),
        _colorTile('cardColor', theme.cardColor, theme.colorScheme.onSurface),
        _colorTile('dividerColor', theme.dividerColor, theme.colorScheme.onSurface),
        // _colorTile('backgroundColor', theme.backgroundColor ?? Colors.transparent, theme.colorScheme.onBackground),
        _colorTile('dialogBackgroundColor', theme.dialogBackgroundColor, theme.colorScheme.onSurface),
        _colorTile('indicatorColor', theme.indicatorColor ?? Colors.transparent, theme.colorScheme.onBackground),
        // _colorTile('toggleableActiveColor', theme.toggleableActiveColor ?? scheme.secondary, scheme.onSecondary),
        _colorTile('shadowColor', theme.shadowColor, Colors.white),
        _colorTile('focusColor', theme.focusColor, Colors.black),
        _colorTile('hoverColor', theme.hoverColor ?? Colors.transparent, Colors.black),
        _colorTile('splashColor', theme.splashColor ?? Colors.transparent, Colors.white),
        _colorTile('hintColor', theme.hintColor, Colors.black54),
        _colorTile('disabledColor', theme.disabledColor ?? Colors.grey, Colors.white),

        const SizedBox(height: 16),
        _sectionTitle('组件示例（直观看颜色如何被使用）', context),

        // Card 使用 cardColor
        Card(
          child: ListTile(
            leading: CircleAvatar(backgroundColor: scheme.primary, child: Icon(Icons.palette, color: scheme.onPrimary)),
            title: const Text('Card - 使用 cardColor 与 colorScheme.primary'),
            subtitle: Text('Card background: theme.cardColor', style: labelStyle),
          ),
        ),
        const SizedBox(height: 8),

        // Divider 使用 dividerColor
        const Divider(),

        // 按钮：Elevated / Outlined / Text
        Wrap(spacing: 8, runSpacing: 8, children: [
          ElevatedButton(
            onPressed: () {},
            child: const Text('Elevated'),
          ),
          OutlinedButton(onPressed: () {}, child: const Text('Outlined')),
          TextButton(onPressed: () {}, child: const Text('Text')),
        ]),
        const SizedBox(height: 8),

        // TextField 使用 hintColor / errorColor
        TextField(
          decoration: InputDecoration(
            labelText: 'TextField (hintColor)',
            hintText: 'hint text',
            border: const OutlineInputBorder(),
            errorText: null,
          ),
        ),
        const SizedBox(height: 8),

        // Switch / Checkbox / Radio 使用 toggleableActiveColor
        Row(children: [
          const Text('Switch:'),
          // Switch(value: true, onChanged: (_) {}, activeColor: theme.toggleableActiveColor),
          const SizedBox(width: 16),
          const Text('Checkbox:'),
          // Checkbox(value: true, onChanged: (_) {}, activeColor: theme.toggleableActiveColor),
          const SizedBox(width: 16),
          const Text('Radio:'),
          // Radio(value: 1, groupValue: 1, onChanged: (_) {}, activeColor: theme.toggleableActiveColor),
        ]),
        const SizedBox(height: 8),

        // Chip、PopupMenuButton、Tooltip 等
        Wrap(spacing: 8, children: [
          Chip(label: const Text('Chip'), backgroundColor: scheme.secondary, labelStyle: TextStyle(color: scheme.onSecondary)),
          PopupMenuButton<int>(
            itemBuilder: (ctx) => [const PopupMenuItem(value: 1, child: Text('Item 1'))],
            child: ElevatedButton(onPressed: null, child: const Text('PopupMenu (uses dialog background)')),
          ),
          Tooltip(message: 'Tooltip', child: Icon(Icons.info, color: theme.hintColor)),
        ]),
        const SizedBox(height: 16),

        // Bottom app bar color demo
        Container(
          height: 56,
          // color: theme.bottomAppBarColor,
          child: Center(child: Text('BottomAppBarColor', style: labelStyle)),
        ),

        const SizedBox(height: 16),

        _sectionTitle('Theme.of(context) 快捷引用示例', context),
        ListTile(
          title: Text('Theme.of(context).primaryColor', style: labelStyle),
          trailing: Container(width: 36, height: 36, color: Theme.of(context).primaryColor),
        ),
        ListTile(
          title: Text('Theme.of(context).colorScheme.primary', style: labelStyle),
          trailing: Container(width: 36, height: 36, color: Theme.of(context).colorScheme.primary),
        ),
        ListTile(
          title: Text('Theme.of(context).colorScheme.onBackground', style: labelStyle),
          trailing: Container(width: 36, height: 36, color: Theme.of(context).colorScheme.onBackground),
        ),

        const SizedBox(height: 24),
        Center(child: Text('End of demo', style: theme.textTheme.bodySmall)),
        const SizedBox(height: 48),
      ],
    );
  }

  Widget _sectionTitle(String title, BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Text(title, style: Theme.of(context).textTheme.titleLarge),
    );
  }

  Widget _colorTile(String name, Color color, Color fg) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 6),
      child: Row(
        children: [
          Container(
            width: 120,
            height: 44,
            color: color,
            alignment: Alignment.center,
            child: Text(
              name,
              style: TextStyle(color: fg),
              textAlign: TextAlign.center,
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Text(
              'Color: 0x${color.value.toRadixString(16).padLeft(8, '0')}',
            ),
          ),
        ],
      ),
    );
  }
}
